
<script type="text/javascript">
    $(document).ready(function(){
        // add category and create file resources
        var imageUrl = '';
        $('#bt_addCatalog').click(function(){
            var sCatalogy =$('#tb_catalog_name').val();
            var sParentCategory = '';
            var sParentCategories = '';
            var bIsSubCategory = false;
            if($('#is_subcategory').prop('checked')){
                bIsSubCategory = 'true';
                sParentCategory = $('#category_uri').val();
                sParentCategories = $('#list_categories').val();
            }


            if(sCatalogy == ''){
                $.alertBox('Thông báo','Tên danh mục không được bỏ trống!');
                return;
            }

            if(imageUrl == ''){
                $.alertBox('Thông báo','Bạn chưa chọn hình đại diện!');
                return;
            }

            $('.process_bar div').css('width','0%');
            $('.process_bar').css('display','block');
            var data = $(this).data();
            data.submit();

            $('.loading').fadeIn();

            // Post to server to save and create file
            $.post('~admin/addCatalogy',{catalog : sCatalogy, bIsSubCategory : bIsSubCategory, sParentCategory : sParentCategory, sParentCategories: sParentCategories, imageUrl : imageUrl} , function(data){
                $('.loading').fadeOut();
                if(data.indexOf('Fail') == -1){
                    $('#tb_catalog_name').val('');
                    var trTable = ' <tr id="'+data+'">' + 
                    '<td><img src="' + ($('#path').val() + 'upload/' + imageUrl) + '"></td>' + 
                    '<td><a href="' + $('#path').val() + 'category/id/' + data + '">'+data+'</a></td>' + 
                    '<td>'+sCatalogy+'</td>' + 
                    '<td><a href="'+sParentCategory+'">'+$('#category_name').val()+'</a></td>' + 
                    '<td class="bt_change_layout">default</td>' + 
                    '<td><input type="button" value="Edit" class="link_button bt_edit_category"></td>' + 
                    '</tr>';
                    $('#tableDisplayCatalog').append(trTable);
                    $('#img_catalo').show();
                    $('#lb_error_catalo').hide();
                }
            });
        });

        // Change this to the location of your server-side upload handler:
        var url = window.location.hostname === 'blueimp.github.io' ?
        '//jquery-file-upload.appspot.com/' : '~upload/upload';
        $('#file_upload').fileupload({
            url: url,
            dataType: 'json',
            autoUpload : false,
            add: function(e, data){
                $('#bt_addCatalog').data(data);
                imageUrl = data.files[0].name;
                $.loadImg(data.files[0] , '.category_image_upload_swap img');
            },
            done: function (e, data) {
                $('.process_bar').fadeOut(1000);
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.process_bar div').css('width',progress + '%');
            }
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');


        // Edit category
        $('#edit_category_form').dialog({
            'autoOpen':false,
            'width':600,
            'height':438,
            'resizable':false,
            'modal':true,
            'title': 'Change hot image',
            'dialogClass':'fixed-dialog',
        });
        $('#tableDisplayCatalog').on('click','.bt_edit_category',function(){
            var productUri = $(this).closest('tr').attr('val');
            $.post('~admin/loadImageOfCategory',{productUri : productUri},function(data){
                $('#edit_category_form').html(data);
                $('#edit_category_form').dialog('open');
                $('.image_tool').css('right','-200px');
                $('.image_tool').css('display','block');
            });
        }); 

        $('#product_layout_form').dialog({
            'autoOpen':false,
            'width':800,
            'height':500,
            'resizable':false,
            'modal':true,
            'title': 'Product Layout',
            'dialogClass':'fixed-dialog',
            buttons: {
                "Choice Layout": function() {
                    var uri = $('#tb_uri').val();
                    var value = $('#product_layout_form .item_active .item_title').text();
                    if(value != ''){
                        var dis= $(this);
                        $.post('~admin/setDefaultCategoryLayout',{uri : uri, value : value},function(data){
                            currentCell.html(value);
                            dis.dialog( "close" );
                        });                       
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

        var currentCell = null;
        $('#tableDisplayCatalog').on('click','.bt_change_layout', function(){
            currentCell = $(this);
            var uri = $(this).closest('tr').attr('val');
            $.post('~entity/getAllProductLayout',{uri : uri},function(data){
                $('#product_layout_form').dialog('open');
                $('#product_layout_form').html(data);
            });
        });
        $('#product_layout_form').on('click','.item',function(){
            $('#product_layout_form .item').removeClass('item_active');
            $(this).addClass('item_active'); 
        });
        $('#product_layout_form').on('click','a',function(event){
            event.preventDefault();
        });
    });
</script>
<div class="admin_header_title">CATEGORIES MANAGE</div>
<div class="metro_table green_metro_style">
    <div class="metro_table_title"><i class="fa fa-bars"></i> Add a New Category</div>
    <div class="metro_table_content">
        <div style="padding: 20px;">
            <img style="margin-left: 20px;" id="img_catalo" hidden="hidden" src="<?php echo URL::getLink('image/tick.png'); ?>"> 
            <div style="clear: both;"></div>
            <div>
                <input style="width: 100px;margin-right: -8px;" type="text" value="Ten Danh Muc" disabled="disabled"> 
                <input id="tb_catalog_name" type="text" style="width: 300px; padding-right: 30px; ">
                <input style="position:relative;z-index:999;" type="checkbox" id="is_subcategory">
                <input style="margin-left: -32px;padding-left:30px;width:130px;border-left:0;" type="text" disabled="disabled" value="Sub Category Of">
            </div>
            <?php 
                $aParams = array(
                    'width' => '587px',
                );
                includeBlock('block/categoryBlock' , $aParams);
            ?>
            <div>
                <div class="category_image_upload_swap">
                    <img src="<?php echo URL::getLink('image/default_user'); ?>" alt="">
                    <input id="file_upload" type="file" name="files[]" multiple>
                    <div class="process_bar"><div></div></div>
                </div>
                <h2 class="small_title">Choice image ... </h2>
            </div>
            <div style="clear: both;"></div>
            <div>
                <!--<input type="button" id="bt_addCatalog" class="link_button" value="Add">-->
                <button id="bt_addCatalog" class="flat_metro_button green_metro_style">Add a New Category <i class="fa fa-plus"></i></button>
                <div class="loading"></div>
            </div>
        </div>
    </div>
</div>
<!--<h1 class="title red_style">List Categories</h1>-->
<div class="metro_table orange_metro_style">
    <div class="metro_table_title"><i class="fa fa-bars"></i> List Categories</div>
    <div class="metro_table_content">
        <table border="1" id="tableDisplayCatalog">
            <thead>
                <tr>
                    <th><i class="fa fa-picture-o"></i> Image</th>
                    <th><i class="fa fa-tag"></i> Category ID</th>
                    <th><i class="fa fa-info"></i> Category Name</th>
                    <th><i class="fa fa-shield"></i> Parent Category</th>
                    <th><i class="fa fa-th"></i> Layout</th>
                    <th><i class="fa fa-th"></i> Color</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <?php
                    $aSettings = $template->get('aSettings');
                    foreach($template->get('aCategories') as $aCategory)
                    {
                        echo '<tr val="'.$aCategory['uri'].'">';
                        echo '<td><img src="'.(isset($aCategory['image']) ? URL::getLink('upload/'.$aCategory['image']) : URL::getLink('image/default_user')).'"></td>';
                        $aTemp = explode('/',$aCategory['uri']);
                        $sCategoryId = end($aTemp);
                        echo '<td><a href="'.$aCategory['uri'].'">'.$sCategoryId.'</a></td>';
                        echo '<td>'.$aCategory['name'].'</td>';
                        echo '<td><a href="'.(isset($aCategory['pCategoryUri']) ? $aCategory['pCategoryUri'] : '').'">'.(isset($aCategory['pCategoryName']) ? $aCategory['pCategoryName'] : '').'</a></td>';
                        echo '<td class="bt_change_layout">'.(isset($aCategory['defaultProductLayout']) ? $aCategory['defaultProductLayout'] : 'Default').'</td>';        
                        $temp = (isset($aSettings[$sCategoryId.'_menu_color']) ? $aSettings[$sCategoryId.'_menu_color'] : $aSettings['default_menu_color']);
                        $sColor = $temp['setting_value'];
                        echo '<td><div class="category_color" style="width:50px;height:20px;background-color:'.$sColor.'"></div></td>';
                        echo '<td><button class="table_bt_metro_edit bt_edit_category"><i class="fa fa-pencil"></i></button><button class="table_bt_metro_delete"><i class="fa fa-trash-o"></i></button></td>';
                        echo "</tr>";
                    }
                ?>
            </tbody>
        </table>
    </div>
</div>
<div id="edit_category_form"></div>
<div id="product_layout_form"></div>